<template>
  <div>
    <div class="total_count">
      <div>
        <div>当月审批中</div>
        <div>{{ currApproveCount }}</div>
      </div>
      <div>
        <div>本月审批通过</div>
        <div>{{ approveCount }}</div>
      </div>
      <div>
        <div>本月驳回申请</div>
        <div>{{ rejectionCount }}</div>
      </div>
    </div>
    <div class="table_wrap">
      <el-table :data="approvalList">
        <el-table-column label="序号" type="index" />
        <el-table-column label="审批类型" prop="processName" />
        <el-table-column label="申请人" prop="username" />
        <el-table-column label="当前审批人" prop="procCurrNodeUserName" />
        <el-table-column label="审批发起时间" prop="procApplyTime" />
        <el-table-column label="审批状态">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.processState===2">审批通过</span>
              <span v-if="scope.row.processState===1">审批中</span>
              <span v-if="scope.row.processState===3">撤销</span>
              <span v-if="scope.row.processState===4">驳回</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link
                type="primary"
                @click="turnInfo(scope.row.
                  processId
                )"
              >查看</el-link>
              <el-button type="primary" style="margin:0 5px;">同意</el-button>
              <el-button type="danger" @click="openDia">驳回</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 20px">
        <el-pagination layout="prev,pager,next" :total="total" :page-size="10" />
      </div>
    </div>
    <el-dialog title="驳回原因" :visible.sync="diaFlag" width="30%">

      <el-input v-model="rejectText" type="texearea" />
      <span slot="footer">
        <el-button type="primary">确定驳回</el-button>
        <el-button @click="diaFlag=false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getApprovalList } from '@/api/approval'
export default {
  data() {
    return {
      diaFlag: false, // 驳回弹出层
      rejectText: '', // 驳回原因
      total: 0,
      approvalList: [], // 审批列表
      approveCount: 0, // 审批通过数量
      currApproveCount: 0, // 当前审批数量
      rejectionCount: 0// 驳回数量
    }
  },
  computed: {
    ...mapGetters(['userObj']) // vuex中存储的用户信息
  },
  created() {
    this.getList()
  },
  methods: {
    turnInfo(id) { // 跳转申请详情
      this.$router.push(`/approval/detail/${id}`)
    },
    openDia() {
      this.diaFlag = true
    },
    async  getList() { // 获取审批列表
      // 10 默认代替vuex中 this.userObj.userId
      const res = await getApprovalList(this.userObj.departmentId, 10)
      console.log(res, '审批列表')
      this.total = res.data.total
      this.approvalList = res.data.rows
      this.currApproveCount = res.data.currApproveCount
      this.rejectionCount = res.data.rejectionCount
      this.approveCount = res.data.approveCount
    }
  }
}
</script>
<style lang="scss">
  .total_count{
    height: 140px;
    margin: 5px;
    display: flex;
    align-items: center;

    >div{
      margin-left: 20px;
      text-align: center;
    }
  }
</style>
